<template>
  <div id="near">
    <div id="amap-main"></div>
  </div>
</template>
<script type="text/ecmascript-6">
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map('amap-main', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 16, // 初始化地图层级
        center: [116.397428, 39.90923],
      });
      const marker = new AMap.Marker({
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: [116.406315, 39.908775],
        offset: new AMap.Pixel(-13, -30),
      });
      marker.setMap(this.map);
    });
  },
};
</script>
<style lang="stylus">
#near {
  #amap-main {
    height: 800px;
  }
}
</style>
